<template>
  <div class="basicQuestionBank-container">
    <el-card class="box-card">
      <el-row class="addQuestionsBtn">
        <!-- 顶部按钮框 -->
        <el-button @click="$router.push('/questions/new')" type="success" icon="el-icon-edit" style="float: right">新增试题</el-button>
      </el-row>
      <el-form ref="requestClearRef" :model="requestParameters" label-width="80px">
        <!-- select选择器 -->
        <el-row :gutter="20">
          <!-- 第一列 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <!-- 学科 -->
              <el-form-item label="学科" prop="SubjectID">
                <el-row>
                  <el-select v-model="requestParameters.SubjectID" placeholder="请选择" @change="getListToContents">
                    <el-option v-for="item in dataListSubject" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 学科 -->

              <!-- 试题类型 -->
              <el-form-item label="试题类型" prop="questionType">
                <el-row>
                  <el-select v-model="requestParameters.questionType" placeholder="请选择">
                    <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 试题类型 -->
              <!-- 题目备注 -->
              <el-form-item label="题目备注" prop="remarks">
                <el-row>
                  <el-input placeholder="请输入内容" v-model="requestParameters.remarks"></el-input>
                </el-row>
              </el-form-item>
              <!-- 题目备注 -->
            </div>
          </el-col>
          <!-- 第一列 -->
          <!-- 第二列 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <!-- 二级目录 -->
              <el-form-item label="二级目录" prop="directoryName">
                <el-row>
                  <el-select v-model="requestParameters.directoryName" placeholder="请选择">
                    <el-option v-for="item in dataListToContents" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 二级目录 -->

              <!-- 难度 -->
              <el-form-item label="难度" prop="difficulty">
                <el-row>
                  <el-select v-model="requestParameters.difficulty" placeholder="请选择">
                    <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 难度 -->
              <!-- 企业简称 -->
              <el-form-item label="企业简称" prop="shortName">
                <el-row>
                  <el-input placeholder="请输入内容" v-model="requestParameters.shortName"></el-input>
                </el-row>
              </el-form-item>
              <!-- 企业简称 -->
            </div></el-col
          >
          <!-- 第二列 -->
          <!-- 第三列 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <!-- 标签 -->
              <el-form-item label="标签" prop="tags">
                <el-row>
                  <el-select v-model="requestParameters.tags" placeholder="请选择">
                    <el-option v-for="item in simpleLabelTags" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 标签 -->

              <!-- 方向 -->
              <el-form-item label="方向" prop="direction">
                <el-row>
                  <el-select v-model="requestParameters.direction" placeholder="请选择">
                    <el-option v-for="item in direction" :key="item" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 方向 -->
              <!-- 城市 -->
              <el-form-item label="城市">
                <el-row :gutter="2">
                  <!-- 省 -->
                  <el-col :span="11">
                    <el-form-item prop="provinces">
                      <el-select v-model="requestParameters.provinces" placeholder="请选择" @change="getListArea">
                        <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 省 -->
                  <!-- 市 -->
                  <el-col :span="12">
                    <el-form-item prop="citys">
                      <el-select v-model="requestParameters.citys" placeholder="请选择">
                        <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="index"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 市 -->
                </el-row>
              </el-form-item>
              <!-- 城市-->
            </div></el-col
          >
          <!-- 第三列 -->
          <!-- 第四列 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <!-- 关键字 -->
              <el-form-item label="关键字" prop="keyword">
                <el-row>
                  <el-input placeholder="请输入内容" v-model="requestParameters.keyword"></el-input>
                </el-row>
              </el-form-item>
              <!-- 关键字 -->
              <!-- 录入人 -->
              <el-form-item label="录入人" prop="usersList">
                <el-row>
                  <el-select v-model="requestParameters.usersList" placeholder="请选择">
                    <el-option v-for="item in usersList" :key="item.id" :label="item.username" :value="item.id"> </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
              <!-- 录入人 -->
              <el-form-item>
                <el-button style="float: right" type="primary" @click="getList">搜索</el-button>
                <el-button style="float: right; margin-right: 10px" @click="resetForm">清除</el-button>
              </el-form-item>
            </div></el-col
          >
          <!-- 第四列 -->
        </el-row>
        <!-- select选择器 -->
      </el-form>
      <!-- 警告条 -->
      <el-alert title="数据 共7条" type="info" show-icon :closable="false"> </el-alert>
      <!-- 警告条 -->
      <!-- tab表格 -->
      <el-table :data="dataList" style="width: 100%" class="questionsTable">
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else>多选</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="200">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-button type="primary" icon="el-icon-view" circle size="mini" plain @click="getviewInfo(scope.row.id)"> </el-button>
            <!-- 预览 -->
            <!-- 试题录入 -->
            <el-button type="success" icon="el-icon-edit" circle size="mini" plain @click="$router.push(`/questions/new?id=${scope.row.id}`)"></el-button>
            <!-- 试题录入 -->
            <!-- 删除 -->
            <el-button type="warning" icon="el-icon-delete" circle size="mini" plain @click="openBtnDeleteId(scope.row.id)"></el-button>
            <!-- 删除 -->
            <!-- 加入精选题库 -->
            <el-button type="danger" icon="el-icon-check" circle size="mini" plain @click="addfeaturedId(scope.row.id)"></el-button>
            <!-- 加入精选题库 -->
          </template>
        </el-table-column>
      </el-table>
      <!-- tab表格 -->
      <questions-preview :viewVisible.sync="viewVisible" :viewInfo="viewInfo" />

      <!-- 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="float: right"
        :current-page="requestParameters.page"
        :page-sizes="[1, 2, 20, 50]"
        :page-size="requestParameters.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        background
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
// 基础题库列表
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
// 学科简单列表
import { simple } from '@/api/hmmm/subjects'
// 目录简单列表
import { simple as toContents } from '@/api/hmmm/directorys'
// 标签简单列表
import { simple as simpleLabel } from '@/api/hmmm/tags'
// 试题类型单选多选简单
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 用户列表
import { list as usersList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
// 基础题库删除
import questionsPreview from '../components/questions-preview'

export default {
  name: 'questionsList',
  components: {
    questionsPreview
  },
  data() {
    return {
      viewInfo: {},
      viewVisible: false,
      requestParameters: {
        // 学科
        SubjectID: '',
        // 二级目录
        directoryName: '',
        // 标签
        tags: '',
        // 试题类型
        questionType,
        // 难度
        difficulty,
        // 方向
        direction,
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 当前页面
        page: 1,
        // 页尺寸
        pagesize: 2
      },
      dialogVisible: false,
      //  页码总数
      total: 0,
      value: {},
      //

      dataList: [],
      // 简单数据列表
      dataListSubject: [],
      // 目录简单列表
      dataListToContents: [],
      // 标签简单列表
      simpleLabelTags: [],
      // 试题类型多选单选简单
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 用户信息录入人
      usersList: [],
      // 所有城市
      provinces,
      //  城市下地区
      citys
      // 删除
    }
    // 存取信息
  },
  methods: {
    async getviewInfo(id) {
      this.viewVisible = true
      try {
        const { data: res } = await detail({ id })
        console.log(res)
        this.viewInfo = res
        // console.log(this.dataList);
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 获取列表数据
    async getList() {
      try {
        const { data: res } = await list(this.requestParameters)
        console.log(res)
        this.dataList = res.items
        this.total = res.counts
        // console.log(this.dataList);
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 学科简单列表
    async getListSubject() {
      try {
        const { data: res } = await simple()
        // console.log(res);
        this.dataListSubject = res
        // console.log(this.dataListSubject);
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 学科简单列表
    // 目录简单列表
    async getListToContents() {
      this.requestParameters.directoryName = null
      try {
        const subjectID = this.requestParameters.Subject
        // console.log(subjectID);
        const { data: res } = await toContents({ subjectID })
        // console.log(res);
        this.dataListToContents = res
        this.getListSimpleLabel()
        // console.log(this.dataListToContents);
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 目录简单列表
    // 标签简单列表
    async getListSimpleLabel() {
      try {
        this.requestParameters.tags = null
        const subjectID = this.requestParameters.Subject
        // console.log(subjectID);
        const { data: res } = await simpleLabel({ subjectID })
        // console.log(res);
        this.simpleLabelTags = res
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 获取用户列表信息
    async getListUsers() {
      try {
        const { data: res } = await usersList(this.requestParameters)
        console.log(res)
        this.usersList = res.list
        // console.log(this.usersList);
      } catch (err) {
        this.$message('获取信息失败')
      }
    },
    // 获取城市信息
    getListCitys() {
      this.provinces = provinces()
      // console.log(this.provinces);
    },
    getListArea() {
      this.citys = citys(this.requestParameters.provinces)
    },
    // 点击清除
    resetForm() {
      // console.log(this);
      this.$refs.requestClearRef.resetFields()
    },
    // 根据id删除对应的用户信息
    async openBtnDeleteId(id) {
      //  console.log(id);
      const confirmResult = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      //  如果用户确认删除则返回字符串confirm
      //  如果用户取消删除则返回字符串cancel
      // console.log(confirmResult);
      if (confirmResult !== 'confirm') {
        return this.$message.info('用户取消删除')
      } else {
        // console.log("确认了删除");
        const { res } = await remove({ id })
        console.log(res)
      }
    },
    async addfeaturedId(id) {
      // console.log(id);
      const confirmAdd = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmAdd);
      // 客户确认提交则返回字符串confirm
      // 客户取消提交则返回字符串cancel
      if (confirmAdd !== 'confirm') {
        return this.$message.info('加入精选失败')
      } else {
        // console.log('加入成功');
        const { res } = await choiceAdd({ id, choiceState: 1 })
        console.log(res)
      }
    },
    // 切换每页显示多少条 监听pagesize
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.requestParameters.pagesize = newSize
      this.getList()
    },
    // 监听 页码值发生了切换
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.requestParameters.page = newPage
      this.getList()
    }
  },
  created() {
    // 读取数据
    this.getList()
    this.getListSubject()
    this.getListUsers()
    this.getListCitys()
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.basicQuestionBank-container {
  .addQuestionsBtn {
    margin-bottom: 19px;
  }
  .questionsTable {
    margin-top: 19px;
  }
  .dialogBtn {
    float: right;
    margin-top: -19px;
  }
}
</style>
